<div style="overflow:hidden; width:722px;position:relative;" id="viewer">
	<div id="viewer-over" style="position:absolute;top:0px;width:722px;z-index:30;background:black;text-align:center;height:200px;">
		<img src="themes/style/index/pics/Banner_brochure.gif" />
	</div>
	<div id="navigator-bar">
		<ul>
			<li>
				<a href="#">Noi Dung 1</a>
			</li>
			<li>
				<a href="#">Noi Dung 1</a>
			</li>
			<li>
				<a href="#">Noi Dung 1</a>
			</li>
			<li>
				<a href="#">Noi Dung 1</a>
			</li>
			<li>
				<a href="#">Noi Dung 1</a>
			</li>
		</ul>
	</div>
	<div id="sliderContent">
		<ul id="imageContent">
			<li>
				<table>
					<tr>
						<td>
							<img src="themes/style/index/pics/schedule_class.jpg" />
						</td>
						<td>
							Noi dung 1
						</td>
					</tr>
				</table>
			</li>
			<li>
				<table>
					<tr>
						<td>
							<img src="themes/style/index/pics/books_banner.JPG" />
						</td>
						<td>
							Noi dung 1
						</td>
					</tr>
				</table>
			</li>
			<li>
				<table>
					<tr>
						<td>
							<img src="themes/style/index/pics/img_newsletter.jpg" />
						</td>
						<td>
							Noi dung 1
						</td>
					</tr>
				</table>
			</li>
			<li>
				<table>
					<tr>
						<td>
							<img src="themes/style/index/pics/forum_rightmenu.jpg" />
						</td>
						<td>
							Noi dung 1
						</td>
					</tr>
				</table>
			</li>
			<li style="width:20%;display:block;float:left;">
				<table>
					<tr>
						<td>
							<img src="uploads/news/1287736324Donggoplumientrung130.jpg" />
						</td>
						<td>
							Noi dung 1
						</td>
					</tr>
				</table>
			</li>
		</ul>
	</div>
</div>
<style>
div#viewer table{
	border:0;
}
div#navigator-bar{
	position:absolute;
	bottom:0px;
	width:722px;
	background:red;
	z-index:30;
}
div#sliderContent ul,
div#navigator-bar ul{
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
div#sliderContent ul>li,
div#navigator-bar ul>li{
	width:20%;
	display:block;
	float:left;
}
div#navigator-bar a{	
	border-left:1px solid #888888;
}
div#sliderContent{
	position:relative;
	width: 3610px;
}
</style>
<script type="text/javascript">
	var isCouldTouch = true;
	$("#viewer").mouseenter(function(){
		$("#viewer-over").animate({
			top: -200
		},500);
	});
	$("#viewer").mouseleave(function(){
		$("#viewer-over").animate({
			top: 0
		},1000);
	});
	$("#navigator-bar").mousemove(function(e){
		if( !isCouldTouch ) return; isCouldTouch = false;
		var target 					= e.target;
		var indexImage 			= 0;
		var toLeft 					= 0;
		if($(target).is("li"))
		{
			indexImage 			= $(target).index();
		}
		else if ( $(target).parent().is("li") )
		{
			indexImage 			= $(target).parent().index();
		}
		else
		{
			return;
		}
		for(var i = 1; i <= indexImage; i++)
		{
			toLeft						+= $("#imageContent > li").eq(i).width();
		}
		$("#sliderContent").animate({
			left:-toLeft
		},500,function(){
			isCouldTouch = true;
		});
	});
</script>